<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='./vue.js'></script>
    <style>
        ol{
            list-style: none;
        }
        img{
            width: 200px;
            height: 200px;
        }
        .banf{
            background-color: black;
        }
        .xcv{
            color: tomato;
        }
    </style>
</head>

<body>
    <div id="root">
        <ul>
            <li v-for="(item,index) in arr" :key="index">{{item}}------{{index}}</li>
        </ul>
        <ul>
            <li v-for="(a,s) in ass" :key="s">{{a}}------{{s}}</li>
        </ul>
        <ul>
            <li v-for="x in add" :key="x.id">
                {{x.obj}}------{{x.id}}
                <ol>
                    <li v-for="c in x.children" :key="c.id">{{c.sd}}---{{c.id}}</li>
                </ol>
            </li>
        </ul>
        <button @click="sc=!sc">点击{{sc?"显示":"隐藏"}}</button><br>
        <p v-if="sc">
            <img  src="./git指令.png" alt="" srcset="">
        </p>
        <p v-show="sc">
            <img  src="./git指令.png" alt="" srcset="">
        </p>


        <h5>文字变色</h5>
        <p style="background:red;color: white;">style-----比萘暖色</p>
        <p :style="{ background:'red',color: 'white' }">style-----比萘暖色</p>


        <h5>文字变色</h5>
        <p class="banf xcv">class-----比萘暖色</p>
        <p :class="[xcxc,ssss]">class-----比萘暖色</p>
        <p :class="{[xcxc]:true,[ssss]:true}">class-----比萘暖色</p>
        <p :class="{banf:true,xcv:true}">class-----比萘暖色</p>
    </div>

    <script>
        new Vue({
            el: '#root',
            data() {
                return {
                    sc:true,
                    xcxc:'banf',
                    ssss:'xcv',
                    arr: [1, 2, 3, 4, 5],
                    ass: {
                        obj: 1,
                        obs: '图'
                    },
                   add:[
                       {   id:1,
                           obj:'图',
                           children:[
                               {sd:'儿童',id:1},
                               {sd:'电饭煲',id:2},
                               {sd:'读法',id:3},
                               {sd:'东莞宾馆',id:4},
                               {sd:'答复',id:5}
                           ]
                       },
                       {   id:2,
                           obj:'图',
                           children:[
                               {sd:'打副本',id:1},
                               {sd:'水电费',id:2},
                               {sd:'刘会计',id:3},
                               {sd:'外人田',id:4},
                               {sd:'挡风板',id:5}
                           ]
                       }
                   ]
                }
            },
            
        });
    </script>

</body>

</html>